<template>
  <div class="content-div">
    <div class="zw-div"></div>
    <div class="service-info">
      <div class="service-money">
        <span>{{serviceInfo.give_service_price.toFixed(2)}}</span>
        <span>元/次</span>
      </div>
      <div style="font-weight: bold;">{{serviceInfo.give_service_type}}</div>
      <div>{{serviceInfo.give_service_name}}</div>
      <div>{{serviceInfo.give_service_synopsis}}</div>
    </div>
    <van-tabs class="tab-box" background="unset" color="#1989fa" title-active-color="#1989fa" line-width="6px" v-model="active">
      <van-tab title="服务内容">
        <div class="content-box" v-html="'<img src='+'https://hqpz.tanjirj.com/uploads/images/20220811/f40655bdd5f6362a73edf6846875aafc.png'+'>'"></div>
      </van-tab>
      <van-tab title="服务须知">
        <div class="content-box" v-html="'<img src='+'https://hqpz.tanjirj.com/uploads/images/20220811/371428662901b596324373fa7904ee42.png'+'>'"></div>
      </van-tab>
    </van-tabs>
    <div class="btn-box" @click="toEdit">
      <div>立即预约</div>
    </div>
  </div>
</template>
<script>
import { findGiveServiceTypeList } from '@/api/medical.js'
export default {
  name: 'index',
  data () {
    return {
      active: 0,
      id: '',
      serviceInfo: {
        give_service_price: 0
      }
    }
  },
  created () {},
  methods: {
    toEdit () {
      this.$router.push({
        path: '/productEdit',
        query: Object.assign({}, this.$route.query, { give_service_name: this.serviceInfo.give_service_name, give_service_describe: this.serviceInfo.give_service_describe })
      })
    },
    getServiceInfo (params) {
      findGiveServiceTypeList(params).then(res => {
        if (res.data.errcode === 0) {
          this.serviceInfo = res.data.data[0]
        }
      })
    }
  },
  mounted () {
    this.getServiceInfo({ give_service_type: this.$route.query.give_service_type, give_service_id: this.$route.query.give_service_id })
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    background-color: #F8F8F8;
    min-height: 100%;
    background-image: url('../../../assets/images/bg-item2.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    .zw-div{
      height: 180px;
    }
    .service-info{
      width: 300px;
      margin-left: 10px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 10px 10px 6px;
      box-sizing: border-box;
      div{
        padding-bottom: 4px;
      }
      .service-money{
        color: #FF0000;
        span:first-child{
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
    .tab-box{
      padding-bottom: 68px;
      .content-box{
        width: 300px;
        margin-left: 10px;
        background-color: #FFFFFF;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 6px;
        margin-top: 6px;
        /deep/ img{
          width: 100%;
        }
      }
    }
    .btn-box{
      width: 100%;
      height: 58px;
      box-sizing: border-box;
      padding: 10px;
      background-color: #FFFFFF;
      box-shadow: 0 0 10px 0 #CCCCCC;
      position: fixed;
      z-index: 1;
      left: 0;
      bottom: 50px;
      div{
        height: 38px;
        background-color: #1989fa;
        color: #FFFFFF;
        text-align: center;
        line-height: 38px;
        border-radius: 6px;
      }
    }
  }
</style>
